import React, { useState } from 'react'

import './popover.scss'
import { withRouter } from 'react-router-dom';




function Com(props) {
  const [visible, setVisible] = useState(false)
  // console.log(props)
  // const [selected, setSelected] = useState('')

  const onSelect = (selection) => {
    // console.log(opt.props.value);
    setVisible(false)
    // setSelected(opt.props.value)
    props.onSelect(selection)
  };

  console.log(props.children.props)

  return (
    <>

      <span onClick={() => {
        setVisible(!visible)
      }}>
        {props.children}
      </span>

      {
        visible ?
          (
            <div style={{ zIndex: 2, height: '100%', width: '100%', position: 'fixed', background: 'rgba(0, 0, 0, 0.2)' }} onClick={() => {
              setVisible(false)
            }}>
              <div className='news-popover' style={{ right: '0.31rem', top: '1.33rem' }}>
                <div className='popover-arrow'></div>
                <ul className='news-popover-list'>
                  <li className='news-popover-item' onClick={() => {
                    onSelect('通讯录')
                    props.history.push('/news/contactsList/levelOne')
                  }}>
                    <img src="/images/address-list-icon.png" alt="" className='news-popover-item-icon' />
                    <p >
                      <span>通讯录</span>
                      <i className='unreadSpot'></i>
                    </p>
                  </li>
                  <li className='news-popover-item' onClick={() => {
                    onSelect('发起群聊')
                    props.history.push('/news/startGroupCHat')
                  }}>
                    <img src="/images/begin-chat-icon.png" alt="" className='news-popover-item-icon' />
                    <p>
                      发起群聊
                    </p>
                  </li>
                  <li className='news-popover-item' onClick={() => {
                    onSelect('扫一扫')
                  }}>
                    <img src="/images/scan-icon.png" alt="" className='news-popover-item-icon' />
                    <p>
                      扫一扫
                    </p>
                  </li>
                  <li className='news-popover-item' onClick={() => {
                    onSelect('我的二维码')
                  }}>
                    <img src="/images/QR-icon.png" alt="" className='news-popover-item-icon' />
                    <p>
                      我的二维码
                    </p>
                  </li>

                </ul>
              </div>
            </div>
          ) : ''
      }

    </>
  )
}

export default withRouter(Com)
